<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .item{
        width: 500px;
        height: 400px;
        background-color:rgba(255,0,0,.5);
    }
    /*使用绝对定位，没有定位的祖先节点，就是针对视口*/
    .item span 
    {
        position: absolute;/*绝对定位*/
        bottom: 0;
        left: 0;
        right: 0;
    }
    /*设置对应的demo下的p元素，对应的要求是让demo下的p元素位于demo的右下角*/
    .demo 
    {   
        position: relative;/*设置定位，否则p元素就会针对视口了！*/
        width: 150px;
        height: 150px;
        background-color: rgb(0,255,0);
    }
    .item .demo  p
    {  
        position: absolute;/*设置绝对定位的时候，由于设置了demo定位,所以会针对demo定位*/
        bottom: 0;
        right: 0;
    }
    /*sitky布局，针对的是可滚动视口(overflow:sckoll属性！)*/
    .sticky 
    {
        width: 500px;
        height: 400px;
        background-color: rgba(0,255,0,0.5);
        overflow: scroll;/*设置滚动*/
    }
    .sticky .nav 
    { 
        background-color:rgb(0,0,255,0.5);
        position: sticky;/*对应最近的滚动视口祖先节点*/
        top: 0;
    }

    
</style>
<body>
    <!--绝对定位语法学习-->
    <div class="item">
        <!--预期效果是span元素跑到了最底下位置-->
        <div class="demo">
            <p>我是demo下的p元素</p>
        </div>
        <!-- <span>我是span元素</span> -->
    </div>
    <!--粘性布局,使用对应的sticky布局即可-->
    <div class="sticky">
        <div class="nav">
            电脑
        </div>
        <h3>商品列表</h3>
    <!--商品列表，用em语法生成 ul >li *4{电脑编号$}-->
    <ul>
        <li>电脑编号1</li>
        <li>电脑编号2</li>
        <li>电脑编号3</li>
        <li>电脑编号4</li>
        <li>电脑编号5</li>
        <li>电脑编号6</li>
        <li>电脑编号7</li>
        <li>电脑编号8</li>
        <li>电脑编号9</li>
        <li>电脑编号10</li>
        <li>电脑编号11</li>
        <li>电脑编号12</li>
        <li>电脑编号13</li>
        <li>电脑编号14</li>
        <li>电脑编号15</li>
        <li>电脑编号16</li>
        <li>电脑编号17</li>
        <li>电脑编号18</li>
        <li>电脑编号19</li>
        <li>电脑编号20</li>
        <li>电脑编号21</li>
        <li>电脑编号22</li>
        <li>电脑编号23</li>
        <li>电脑编号24</li>
        <li>电脑编号25</li>
        <li>电脑编号26</li>
        <li>电脑编号27</li>
        <li>电脑编号28</li>
        <li>电脑编号29</li>
        <li>电脑编号30</li>
        <li>电脑编号31</li>
        <li>电脑编号32</li>
        <li>电脑编号33</li>
        <li>电脑编号34</li>
        <li>电脑编号35</li>
        <li>电脑编号36</li>
        <li>电脑编号37</li>
        <li>电脑编号38</li>
        <li>电脑编号39</li>
        <li>电脑编号40</li>
        <li>电脑编号41</li>
        <li>电脑编号42</li>
        <li>电脑编号43</li>
        <li>电脑编号44</li>
        <li>电脑编号45</li>
        <li>电脑编号46</li>
        <li>电脑编号47</li>
        <li>电脑编号48</li>
        <li>电脑编号49</li>
        <li>电脑编号50</li>
    </ul>
    </div>
</body>
</html>